<template>
  <el-card shadow="never">
    <div slot="header">
      <el-button @click="handleBack">返回</el-button>
    </div>
    <el-tabs v-model="active">
      <el-tab-pane label="基本信息" name="first">
        <el-row :gutter="20">
          <el-col :span="8">
            <detail-card ref="detailCard" />
          </el-col>
          <el-col :span="12">
            <second-card ref="secondCard" />
          </el-col>
        </el-row>
      </el-tab-pane>
      <!-- <el-tab-pane label="考评内容" name="second">
        <detail-table ref="detailTable" />
      </el-tab-pane>-->
    </el-tabs>
  </el-card>
</template>

<script>
import DetailCard from './DetailCard'
// import DetailTable from './DetailTable'
import SecondCard from './SecondCard'
import { getSession, setSession, removeSession } from '@/utils/util'

export default {
  components: {
    DetailCard,
    // DetailTable,
    SecondCard
  },
  data() {
    return {
      active: 'first',
      row: this.$route.params.row || getSession('satisfactionSchemeRow')
    }
  },
  async created() {
    if (JSON.stringify(this.$route.params) !== '{}') {
      setSession('satisfactionSchemeRow', this.$route.params.row)
    }
    if (this.row) {
      console.log('row', this.row)

      this.$nextTick(() => {
        this.$refs.detailCard.show(this.row)
        // this.$refs.detailTable.show(this.row.internalPlanItemList)
        this.$refs.secondCard.show(this.row)
      })
    } else {
      this.$message.error('页面发生错误，即将返回列表页')
      setTimeout(() => {
        this.$router.push({
          name: 'evaluatePlan'
        })
      }, 1000)
    }
  },
  methods: {
    handleBack() {
      this.$router.push({
        name: 'satisfactionScheme'
      })
    }
  },
  destroyed() {
    removeSession('satisfactionSchemeRow')
  }
}
</script>
